import React from 'react'
import {Link} from 'react-router-dom'
// import { Modal,Toast } from 'antd-mobile';
import '../../assets/css/profile/profile.less'
import store from '../../store/index'
import connect from "react-redux/es/connect/connect";
import {withRouter} from 'react-router-dom'
import {Modal} from "antd-mobile";
import 'antd-mobile/lib/modal/style/index.css'
 class ProfileComponents extends React.Component{
    constructor(props){
        super(props)
        console.log(props.state);
        this.state = this.props.state.userInfo
    }
    // 保存用户信息至redux
    setUser(res){
        this.setState({
            uid:res.data.uid,
            cellphone:res.data.cellphone,
            nickname:res.data.nickname,
            utype:res.data.utype,
            gender:res.data.gender,
            head:res.data.head,
            points:res.data.points
        })
        // localStorage.setItem('userInfo', JSON.stringify(this.state));
        store.dispatch({type:'setuser',value:res.data})
        console.log(this.state);
    }
    // 获取用户信息
    getUser(){
        fetch('http://vueshop.glbuys.com/api/user/myinfo/userinfo/uid/'+localStorage['uid']+'?token=1ec949a15fb709370f').then((res)=>res.json())
            .then((res)=>{
                console.log(res);
                if(res.code===200){
                this.setUser(res)
                }
            })
    }
    componentDidMount() {
        console.log(this.props.state.login);
        if(this.props.state.login==='true'){
            this.getUser()
            console.log('获取');
        }else{
            this.setState({
                nickname:'昵称',
                points:'0'
            })
        }

    }
    // 退出登录
    outLogin(){
        Modal.alert('提示', '您确定要退出吗？', [
            {
                text: '取消',
                onPress: () =>{}
            },
            { text: '确定', onPress:() =>{
                    localStorage['login'] = 'false'
                    store.dispatch({type:'login',value:'false'})
                    console.log(this.props.state.login);
                    this.setState({
                        nickname:'昵称',
                        points:'0'
                    })
                } },
        ])

    }
    pushPath(path){
        if(localStorage['login']){
            var tf = JSON.parse(localStorage['login'])
            if(tf){
                this.props.history.push(path)
            }else{
                this.props.history.push('/login')
            }
        }else{
            this.props.history.push('/login')
        }

    }
     setPath(path,index){
         if(localStorage['login']){
             var tf = JSON.parse(localStorage['login'])
             if(!tf){
                 this.props.history.push('/login')
                 return
             }
             this.props.history.push({
                 pathname:path,
                 query:{
                     id:index
                 }
             })
         }else{
             this.props.history.push('/login')
         }


     }
    render() {
        return(
            <div id='profile'>
                <div className='header'>个人中心</div>
                <div className='user'>
                    <div>
                        {JSON.parse(this.props.state.login)?
                            <img src={this.state.head} alt=""/>:
                            <img src="/images/user/my/default-head.png" alt=""/>
                        }
                    </div>
                    <div>
                        <div className='user-name'>
                            {this.state.nickname}
                        </div>
                        <div className='user-jifen'>
                            我的积分: {this.state.points}
                        </div>
                    </div>
                </div>
                <div className='order'>
                    <div>
                        <div>全部订单</div>
                        <div onClick={this.setPath.bind(this,'/profile/allorder','all')}>查看全部订单></div>
                    </div>
                    <div>
                        <div onClick={this.setPath.bind(this,'/profile/allorder','0')}>
                            <div><img src="/images/user/my/pay.png" alt=""/></div>
                            <div>待支付</div>
                        </div>
                        <div onClick={this.setPath.bind(this,'/profile/allorder','1')}>
                            <div><img src="/images/user/my/shouhuo.png" alt=""/></div>
                            <div>待收货</div>
                        </div>
                        <div onClick={this.setPath.bind(this,'/profile/allorder','2')}>
                            <div><img src="/images/user/my/comment.png" alt=""/></div>
                            <div>待评价</div>
                        </div>
                    </div>
                </div>
                <div className='user-setting'>
                    <div onClick={this.pushPath.bind(this,'/profile/userInfo')}>
                        <div>个人资料</div>
                        <div>
                            <img src="/images/user/my/右箭头.png" alt=""/>
                        </div>
                    </div>
                    <div onClick={this.pushPath.bind(this,'/profile/site')}>
                        <div>收货地址</div>
                        <div>
                            <img src="/images/user/my/右箭头.png" alt=""/>
                        </div>
                    </div>
                    <div  onClick={this.pushPath.bind(this,'/profile/bind')}>
                        <div>绑定手机</div>
                        <div>
                            <img src="/images/user/my/右箭头.png" alt=""/>
                        </div>
                    </div>
                    <div onClick={this.pushPath.bind(this,'/profile/setPwd')}>
                        <div>修改密码</div>
                        <div>
                            <img src="/images/user/my/右箭头.png" alt=""/>
                        </div>
                    </div>
                    <div onClick={this.pushPath.bind(this,'/profile/myCart')}>
                        <div>我的收藏</div>
                        <div>
                            <img src="/images/user/my/右箭头.png" alt=""/>
                        </div>
                    </div>
                </div>
                <div className='login-btn'>
                    {this.props.state.login==='false'?
                    <Link to='/login'>登录/注册</Link>:<div onClick={this.outLogin.bind(this)}>安全退出</div>
                    }



                </div>
            </div>
        )
    }
}
export default withRouter(
    connect((state)=>{
        return{
            state
        }
    })(ProfileComponents)
)